<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="static/easyui/jquery.min.js" charset="utf-8"></script>
	<link rel="stylesheet" href="/static/easyui/themes/default/easyui.css">
	<link rel="stylesheet" href="/static/easyui/themes/icon.css">
	<script type="text/javascript" src="static/easyui/jquery.easyui.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
				$.extend($.fn.validatebox.defaults.rules, {    
				    equals: {    
				        validator: function(value,param){    
				            return value.length >= param[0] && value.length<=param[1];    
				        },    
				        message: '用户名因该为2-5个字符之间'   
				    },
				    passwordinput: {    
				        validator: function(value,param){    
				            return value.length == param[0];    
				        },    
				        message: '密码必须为6个字符'   
				    }
				});  
				//数值验证
				$('#username').numberbox({
					min:0,
					max:150,
					required:true,
					missingMessage:'年龄必填！',
					precision:0/* 允许的小数点 */
				});
				
				//日期组件
				$('#endtime').datebox({
					required:true,
					missingMessage:'日期必选！',
					editable:false
				});
				
				$('#money').numberbox({
					min:1000,
					max:50000,
					required:true,
					missingMessage:'薪水必填！',
					precision:2/* 允许的小数点 */
				});
				//日期时间组件
				$('#timedate,#xxxtime').datetimebox({
					required:true,
					missingMessage:'时间必填',
					editable:false
				});
				
				$('#but').click(function(){
					$('#myform').form('submit',{
						url:'add',
						onSubmit:function(){
							/* 查询校验是否通过 */
							if(!$('#myform').form('validate')){
								$.messager.show({
									title:'提示信息',
									msg:'验证没有通过，不能新增！'
								});
								return false;
							}
							
						},
						
						
						success:function(result){
							$.messager.alert('消息','用户新增成功','info');
						},
						error:function(result){/* 当出现错误时 */
							$.messager.alert('消息','用户新增失败','error');
						}
						
					});
				});
		});
	</script>
	<style type="text/css">
		#mydiv{
		}
	</style>
</head>
<body>
	<div  id="mydiv" class="easyui-panel" title="新增用户" style="width: 400px;height: 300px; ">
	<form action="add" method="post" id="myform">
		<table>
			<tr>
				<td>用户名</td><!-- required:true不为空 -->
				<td><input type="text" name="name" value="" class="easyui-validatebox" data-options="required:true,validType:'equals[2,5]',missingMessage:'姓名必填！',invalidMessage:'会覆盖JS的校验提示（不建议使用）'" ></td>
			</tr>
			<tr>
				<td>账号</td>
				<td><input type="text" name="username" value="" id="username" ></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="text" name="password" value="" class="easyui-validatebox" data-options="required:true,validType:'passwordinput[6]',missingMessage:'密码必填！'"></td>
			</tr>
			<tr>
				<td>性别</td>
				<td>
					男<input type="radio" name="sex" value="男" checked="checked">
					女<input type="radio" name="sex" value="女">
				</td>
			</tr>
			<tr>
				<td>时间</td>
				<td><input type="text" name="endtime" value="" id="endtime"></td>
			</tr>
			<tr>
				<td>测试(所属城市)</td>
				<td><input type="text" name="test" value="" class="easyui-combobox" url="listfind" valueField="id" textField="name" editable="false"></td>
			</tr>
			<tr> 
				<td>薪水（无实际意义）</td>
				<td><input type="text" value="" id="money"></td>
			</tr>
			<tr> 
				<td>时分秒</td>
				<td><input type="text" value="" id="timedate" name="timedate"></td>
			</tr>
			<tr> 
				<td></td>
				<td><a id="but" class="easyui-linkbutton">提交</a></td>
			</tr>
		</table>
	</form>
	</div>
</body>
</html>